<template>
	<view class="uni-content" :style="{ paddingTop: top + 'px' }">
		<view class="login-logo">
			<image src="/static/jtlogo.png"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box">{{ title }}</text>
		<text class="description">{{ description }}</text>
		<u--form
			ref="loginFormRef"
			:model="loginData"
			:rules="loginRules"
			:errorType="errorType"
			labelPosition="left">
			<u-form-item prop="type" @click="hideKeyboard">
				<u--input
					v-model="loginData.type"
					disabled
					class="input-box"
					placeholder="请选择项目"></u--input>
				<!-- <template #right>
					<u-icon name="arrow-right"></u-icon>
				</template> -->
			</u-form-item>
			<u-form-item prop="loginName">
				<u--input
					:focus="focusloginName"
					@blur="focusloginName = false"
					class="input-box"
					clearable
					v-model="loginData.loginName"
					placeholder="请输入账号" />
			</u-form-item>
			<u-form-item prop="passWord">
				<u--input
					:focus="focuspassWord"
					@blur="focuspassWord = false"
					class="input-box"
					clearable
					type="passWord"
					v-model="loginData.passWord"
					placeholder="请输入密码" />
			</u-form-item>
		</u--form>
		<u-action-sheet
			:show="showType"
			:actions="projects"
			title="请选择登录平台"
			description=""
			@close="showType = false"
			@select="typeSelect"></u-action-sheet>

		<button
			class="uni-btn"
			type="primary"
			@click="pwdLogin"
			:loading="loading">
			登 录
		</button>
		<!-- 忘记密码 -->
		<view class="link-box">
			<view>
				<text class="link" @click="toRetrievePwd">忘记密码</text>
			</view>
		</view>
		<!-- 其他操作 -->
		<view class="tool">
			<view @click="jumpTo('/pages/login/scancodeLogin')">
				<view class="iconView">
					<u-icon name="scan" color="#2979ff" size="35px"></u-icon>
				</view>
				<text>扫码</text>
			</view>
			<view @click="showTip">
				<view class="iconView">
					<u-icon name="setting" color="#2979ff" size="35px"></u-icon>
				</view>
				<text>设置</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
// 导入仓库
import { useUserStore } from "@/stores/useUserStore";
import { reactive, ref } from "vue";

const top = uni.getSystemInfoSync().safeAreaInsets.top;

const title = process.env.VITE_APP_TITLE;
const description = process.env.VITE_APP_DES;

// 显示待开发提示
function showTip() {
	uni.showToast({
		title: "敬请期待",
		icon: "none",
	});
}

// 定义基本表单信息
const loginFormRef = ref();
const loginData = reactive({
	loginName: "admin",
	passWord: "pp%@5njj9@owr~Ia",
	type: "项目1",
});
// const loginData = reactive({
// 	loginName: '',
// 	passWord: '',
// 	type: ''
// });
const loginRules = ref({
	type: {
		type: "string",
		required: true,
		message: "请选择登录项目",
		trigger: ["blur", "change"],
	},
	loginName: {
		type: "string",
		required: true,
		message: "请输入登录名",
		trigger: ["blur", "change"],
	},
	passWord: [
		{
			type: "string",
			required: true,
			message: "请输入密码",
			trigger: ["blur", "change"],
		},
		{
			validator: (rule, value, callback) => {
				if (value.length < 6) {
					return false;
				}
			},
			message: "密码长度不能少于6位",
		},
	],
});

// 定义其他表单信息
const focusloginName = ref(false);
const focuspassWord = ref(false);
const showType = ref(false);
const errorType = ref("toast");

// 项目下拉选项
const projects = ref([
	{ value: 0, name: "项目1" },
	{ value: 1, name: "项目2" },
	{ value: 2, name: "项目3" },
]);

/**
 * 选择登录项目
 */
function typeSelect(e) {
	loginData.type = e.name;
}
/**
 * 忘记密码
 */
function toRetrievePwd() {
	uni.showToast({
		title: "请联系管理员",
	});
}
/**
 * 组织键盘弹出
 */
function hideKeyboard() {
	showType.value = true;
	uni.hideKeyboard();
}
/**
 * 登录
 */
const loading = ref(false);
function pwdLogin() {
	loading.value = true;
	loginFormRef.value
		.validate()
		.then(async (res) => {
			await useUserStore()
				.login(loginData)
				.finally(() => (loading.value = false));
		})
		.catch((errors) => {
			console.log("errors", errors);
			loading.value = false;
		});
}
/**
 * 跳转
 */
function jumpTo(url) {
	uni.redirectTo({
		url: url,
	});
}
</script>

<style lang="scss" scoped>
@import "@/static/css/login-page.scss";

@media screen and (min-width: 690px) {
	.uni-content {
		height: auto;
	}
}

.forget {
	font-size: 12px;
	color: #8a8f8b;
}

.link-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
}

.link {
	font-size: 13px;
}
.tool {
	display: flex;
	width: 100%;
	background: #ffffff;
	justify-content: space-evenly;
	margin-top: 40px;

	> view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 20px;

		& text {
			font-size: 15px;
			font-weight: 400;
			color: #999;
			line-height: 32rpx;
		}

		& .iconView {
			width: 70px;
			height: 70px;
			background: #ecf5ff;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
		}
	}
}
</style>
